<template>
  <div>
    <el-dialog
      title="项目历史状态变更动态"
      :visible.sync="centerDialogVisible"
      width="900px"
      :before-close="dialogClose"
      :append-to-body="true"
    >
      <el-row>
        <el-table
          :data="tableList"
          v-loading="loading"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          stripe
          style="border: 1px solid #dfe6ec"
        >
          <el-table-column
            prop="change"
            label="状态变更"
            align="center"
            width="140"
          ></el-table-column>
          <el-table-column label="变更用户" width="230">
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.creatorName"
                :columnName="'creatorName'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="变更时间"
            align="center"
            width="180"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            prop="operateDate"
            label="开工/停工/竣工时间"
            align="center"
            :formatter="formatTd"
            width="230"
          ></el-table-column>
          <el-table-column label="变更原因说明" width="230">
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.remark"
                :columnName="'remark'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            prop="contractFiles"
            label="附件"
            align="left"
            :formatter="formatTd"
          >
            <template slot-scope="scope">
              <el-link
                type="primary"
                @click="toUploadFile(scope.$index, scope.row)"
                >查看</el-link
              >
            </template>
          </el-table-column>
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="isShow">
            <emptyTable emptyText="暂无数据"></emptyTable>
          </div>
        </el-table>
        <!-- filterField为搜索条件 -->
        <!-- getTableList为获取子组件的数据 -->
        <Pagination
          style="margin-top: 16px"
          ref="pagination"
          @getList="getTableList"
          :filterField="filterField"
          :pageSize="pageSize"
          :pageSizes="pageSizes"
          :requestUrl="requestUrl"
        ></Pagination>
      </el-row>
    </el-dialog>
    <!-- 合同附件 -->
    <!-- <el-dialog title="附件" :visible.sync="uploadContract" :modal-append-to-body="false" :append-to-body="true">
        <div class="uploadBox" v-show="uploadImg.length < 1">暂无附件</div>
        <div>
          <ul class="clearfix imgStyle">
            <li class="fl" v-for="(item,index) of uploadImg" :key="index">
              <el-image
                style="width: 100px; height: 100px"
                :src="item.url ? item.url : item.absolutePath "
                :preview-src-list="srcList"
                @click="enlargeImg(index)"
              ></el-image>
            </li>
          </ul>
        </div>
      </el-dialog> -->
    <contractEnclosureDialog
      v-if="uploadContract"
      dialogTitle="附件"
      :tableData="uploadImg"
      @closeDialog="uploadContract = false"
    ></contractEnclosureDialog>
  </div>
</template>
<script>
export default {
  name: 'projectHistoryChange',
  data() {
    return {
      centerDialogVisible: true,
      requestUrl: 'api-p/projectstatus/expand/findStatusList',
      filterField: {
        projectId: this.projectId,
      },
      //表格数据
      tableList: [],
      loading: true,
      isShow: false, //列表加载
      pageSize: 5,
      pageNo: 1,
      pageSizes: [5, 10, 15, 20],
      uploadContract: false, //合同附件
      uploadImg: [],
      srcList: [],
      oldSrcList: [],
    }
  },
  props: {
    projectId: {
      type: String,
      required: true,
    },
  },
  created() {
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData()
    })
  },
  methods: {
    getTableList(data) {
      this.tableList = data
      this.loading = false
      if (this.tableList.length < 1) {
        this.isShow = true
      }
    },
    dialogClose() {
      this.$emit('closeDialog')
    },
    toUploadFile(index, row) {
      this.uploadImg = []
      this.srcList = []
      this.oldSrcList = []
      this.uploadContract = true
      this.uploadImg = row.contractFiles
      for (var i = 0; i < this.uploadImg.length; i++) {
        this.srcList.push(this.uploadImg[i].absolutePath)
        this.oldSrcList.push(this.uploadImg[i].absolutePath)
      }
    },
    enlargeImg(index) {
      this.srcList = this.oldSrcList
      var demo = this.srcList
      var frontArr = demo.slice(0, index)
      var behindArr = demo.slice(index, demo.length)
      var list = behindArr.concat(frontArr)
      this.srcList = list
    },
  },
}
</script>
<style scoped lang="less">
.uploadBox {
  text-align: center;
  padding: 20px;
}
.imgStyle {
  margin-top: 20px;
  li {
    margin-right: 20px;
    margin-top: 10px;
  }
}
/deep/ .el-dialog__body {
  padding: 16px 20px 0;
}
</style>
